<template>
    <div>        
        <div class="search-box">
            <van-icon name="arrow-left" @click="gosearch" size='1.5rem' color='#c3af9b' style='margin-left: 10px;line-height: 50px;'/>
            <input type="text" placeholder="lns风配饰" 
            style='width: 75%;height: 60%;border: none;border-radius: 2rem;text-indent: 20px;font-size: 12px;margin-top: 10px;margin-right: 10px;'/>
            <button style="width:15%;height:60%;border-radius: 2rem;font-size: 12px;margin-top: 10px;border: none;background-color: #c1ab96;color: white;">搜索</button>        
        </div>
        <div>
            <title-zu></title-zu>            				
        </div>
        <div style= 'display: flex;width: 100%;'>
            <div style="width:75%">
            <van-tabs v-model:active="active" line-width="0px" title-active-color="#c1ab96">
                <van-tab title="综合">111</van-tab>
                <van-tab title="销量">222</van-tab>
                <van-tab title="价格">333</van-tab>               
            </van-tabs>           
            </div>
            <div>
                <van-cell  @click="showPopup">筛选</van-cell>
                <van-popup v-model:show="show" position="right" :style="{ height: '100%',width:'70%' }">
                    <div style="height:8%;border-bottom: 1px solid #f1f0ed;margin-top: 4%;line-height:3rem;text-indent: 20px;"><h3>筛选</h3></div>
                    <div style="height:8%;border-bottom: 1px solid #f1f0ed;line-height:3rem;text-indent: 20px;">价格区间</div>
                    <div style="height:12%;border-bottom: 1px solid #f1f0ed;">
                        <van-slider v-model="value" range @change="onChange" style='margin-top: 4rem;'/>
                    </div>
                    <div style="height:8%;border-bottom: 1px solid #f1f0ed;line-height:3rem;text-indent: 20px;">品牌</div>
                    <div style="height:15%;border-bottom: 1px solid #f1f0ed;display: flex;flex-wrap: wrap;justify-content: center;">
                        <el-button plain style="width:60px;height: 25px;font-size: 12px;margin-top: 10px;" v-for="item in brand">{{item}}</el-button>
                    </div>
                    <div style="height:8%;border-bottom: 1px solid #f1f0ed;line-height:3rem;text-indent: 20px;">折扣和服务</div>
                    <div style="height:15%;">
                        <el-checkbox-group>
                            <el-checkbox-button v-for="item in ccpl" :key="item" style="width:60px;height: 25px;font-size: 12px;margin-top: 10px;">{{item}}</el-checkbox-button>
                        </el-checkbox-group>
                    </div>
                    <div style="margin-top: 100%;">
                        <button style="border:none;width: 50%;height: 3rem;">重置</button>
                        <button style="background-color:#c1ab96;color: white;border: none;width: 50%;height: 3rem;">确定</button>
                    </div>
                </van-popup>
            </div>   
        </div>
             
    </div>
</template>
<script lang="ts" setup>
import { Toast } from 'vant';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import titleZu from '../compontent/titleZu.vue';
import xxx from '../compontent/xxx.vue'


const $router = useRouter()

let gosearch =()=>{
    history.back()
}

const active = ref(0);

const show = ref(false);
const showPopup = () => {
    show.value = true;
};

    const value = ref([10, 50]);
    const onChange = (value) => Toast('当前值：' + value);

const brand = ['vitasion','pola','swisse','fancl','dhc','卓娅']
const ccpl = ['包邮','免税','7天内退货','折扣','全球购','满赠']
</script>
<style scoped>
    .search-box{
        width: 100%;
        height: 50px;      
        display: flex;
        justify-content: center;
        background-color: #eae9e5;
    }
</style>